<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景位置</title>
    <style>
        /*
        属性名：background-position（bgp）
        ➢ 属性值：background-position：水平方向位置，垂直方向位置
        1。方位名词（最多只能表示9个位置）
            1.1水平方向：left、center、right、top
            1.2垂直方向：center、bottom
        2。数字+px（坐标）
            2.1:坐标系：原点（0，0） 盒子左左上角、y轴：垂直向下、x轴：水平向右
➢ 注意点：
• 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
        */
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
            /* background-position: right 0; */
            /* background-position: right bottom; */
            /* background-position: center center; */
            /* background-position: center; */
            /* background-position: 50px 0; */
            /* background-position: 50px 100px; */
            background-position: -50px -100px;

            /* 正数: 向右向下移动; 负数:向左向上移动 */
            /* 注意: 背景色和背景图只显示在盒子里面 */
        }
    </style>
</head>
<body>
<div>文字</div>
</body>
</html>